<template>
	<div>
		<div class="flex-center margin-bottom-10">
			<div v-for="(processItem, processIndex) in ruleFrom.processOutputList" :key="processIndex" class="flex-start-center">
				<jk-button v-if="processItem.processCode ? ['XS', 'SM', 'BT', 'TB', 'EB', 'MB', 'CS'].includes(processItem.processCode.toUpperCase()) : false" class="total-item" type="primary">
					<span style="font-size: 14px;">{{ processItem.processName }}：{{ processItem.processOutput || 0 }}M</span>
				</jk-button>
				<jk-button v-if="processItem.processCode ? ['XS', 'LT'].includes(processItem.processCode.toUpperCase()) : false" class="total-item" type="primary">
					<span style="font-size: 14px;">{{ processItem.processName }}：{{ processItem.processQty || 0 }}KG</span>
				</jk-button>
			</div>
		</div>
		<el-row :gutter="12" style="display: flex;">
			<el-col :span="20">
				<el-row :gutter="12" style="display: flex;">
					<el-col
						v-for="(shiftItem, shiftIndex) in ruleFrom.scheduleShiftMachineList"
						:key="shiftIndex"
						:span="ruleFrom.scheduleShiftMachineList && ruleFrom.scheduleShiftMachineList.length ? 24 / ruleFrom.scheduleShiftMachineList.length : 24"
					>
						<div class="shift-item">
							<div class="card-title">{{ shiftItem.shiftName }}</div>
							<div class="content" :style="{height: `${tableHeight - 50}px`}">
								<el-tag type="primary" effect="plain" class="margin-bottom-4">
									<span class="el-icon-bank-card item-gap"></span>
									<span>机台产量</span>
								</el-tag>
								<jk-table :span-method="mergeColMethod" class="margin-bottom-10" border="inner" :data="shiftItem.machineList || []">
									<vxe-column title="工序" align="left" field="processName" :width="60" />
									<vxe-column title="机台" align="left" field="machineName" :width="90" />
									<vxe-column title="品种" align="left" field="productString" :min-width="180"></vxe-column>
									<vxe-column title="产量" align="right" field="machineYield" :width="120"></vxe-column>
									<vxe-column title="人员" align="left" field="empString" :width="160" />
								</jk-table>
								<div>
									<div class="flex-between-center margin-bottom-4">
										<el-tag type="primary" effect="plain">
											<span class="el-icon-c-scale-to-original item-gap"></span>
											<span>工序信息</span>
										</el-tag>
										<div class="flex-start-center">
										</div>
									</div>
									<jk-table class="margin-bottom-10" border="inner" :data="shiftItem.processOpenNumList || []">
										<vxe-column title="工序" align="left" field="processName" :width="60" />
										<vxe-column title="开台数" align="right" field="processMachineOpenNum" :width="70" />
										<vxe-column title="产量(M)" align="right" field="processOutput" :width="100" />
										<vxe-column title="产量(kg)" align="right" field="processQty" :width="100" />
									</jk-table>
								</div>
								<div class="flex-between-center margin-bottom-4">
									<el-tag type="primary" effect="plain">
										<span class="el-icon-user item-gap"></span>
										<span>特定岗位及人员</span>
									</el-tag>
									<div class="flex-start-center">
										<!--<jk-button v-for="(openMachineItem, openMachineIndex) in shiftItem.processOpenNumList" :key="openMachineIndex" size="mini" style="margin-left: 4px;">{{ openMachineItem.processName }}: {{ openMachineItem.processMachineOpenNum || 0 }}台</jk-button>-->
										<!--<jk-button size="mini">自络: {{ shiftItem.shiftZltOpenNum || 0 }}台</jk-button>-->
									</div>
								</div>
								<jk-table class="margin-bottom-10" border="inner" :data="shiftItem.shiftPostList || []">
									<vxe-column title="岗位" align="left" field="postName" :width="60" />
									<vxe-column title="人员明细" align="left" field="productString" :min-width="180">
										<template slot-scope="scope">
											<div>{{ scope.row.empList ? scope.row.empList.map(empItem => `${empItem.empName}`).join(',') : '无' }}</div>
										</template>
									</vxe-column>
								</jk-table>
								<div v-if="shiftItem.shiftName === '早班'">
									<div class="flex-between-center margin-bottom-4">
										<el-tag type="primary" effect="plain">
											<span class="el-icon-sunny item-gap"></span>
											<span>常白班-岗位及人员</span>
										</el-tag>
										<div class="flex-start-center">
										</div>
									</div>
									<jk-table class="margin-bottom-10" border="inner" :data="shiftItem.cbbPostList || []">
										<vxe-column title="岗位" align="left" field="postName" :width="60" />
										<vxe-column title="人员明细" align="left" field="productString" :min-width="180">
											<template slot-scope="scope">
												<div>{{ scope.row.empList ? scope.row.empList.map(empItem => `${empItem.empName}`).join(',') : '无' }}</div>
											</template>
										</vxe-column>
									</jk-table>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="4">
				<div class="shift-item">
					<div class="card-title">岗位人数</div>
					<div
						class="content"
						:style="{height: `${tableHeight - 50}px`}"
					>
						<jk-table show-footer :footer-method="footerMethod" border :data="ruleFrom.postList || []">
							<vxe-column title="岗位" align="left" field="postName" :min-width="100" />
							<vxe-column title="人数" align="right" field="empNum" :width="50"></vxe-column>
						</jk-table>
					</div>
				</div>
			</el-col>
		</el-row>
		<div class="margin-top-10">
			<span style="font-size: 13px;color: #515a6e;">打包批号明细</span>
			<el-input v-model="ruleFrom.packBatchData" type="textarea" :rows="2"></el-input>
			<span style="font-size: 13px;color: #515a6e;">备注</span>
			<el-input v-model="ruleFrom.remark" disabled type="textarea" :rows="2"></el-input>
			<div class="flex-center">
				<jk-button type="primary" class="margin-top-10 search-bar-item-size2" icon="el-icon-position" :loading="saveBtnLoading" @click="onSaveBtn">保存</jk-button>
			</div>
		</div>
	</div>
</template>
<script>
    import XEUtils from 'xe-utils';
    import { productionSpunYarnOutputSaveOrUpdateBatchData } from '../../../../api/production/reports';
    import { tipsBar } from '../../../../utils/jk/jk-tool';

    export default {
        props: {
            reportData: {
                type: Object,
                default() {
                    return {};
                }
            },
            searchParams: {
                type: Object,
                default() {
                    return {};
                }
            },
            tableHeight: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                saveBtnLoading: false,
                ruleFrom: {}
            };
        },
        methods: {
            onSaveBtn() {
                this.saveBtnLoading = true;
                productionSpunYarnOutputSaveOrUpdateBatchData({
                    workshopId: this.searchParams.workshopId,
                    belongDate: this.searchParams.belongDate,
                    packBatchData: this.ruleFrom.packBatchData,
                    remark: this.ruleFrom.remark
                }).then(res => {
                    this.saveBtnLoading = false;
                    if (res.data.status === 200) {
                        tipsBar(this, 'save');
                    }
                });
            },
            onChange() {
                this.$emit('update:reportData', JSON.parse(JSON.stringify(this.ruleFrom)));
            },
            mergeColMethod({ row, _rowIndex, column, visibleData }) {
                if (row.processName && column.property === 'processName') {
                    const prevRow = visibleData[_rowIndex - 1];
                    let nextRow = visibleData[_rowIndex + 1];
                    if (prevRow && prevRow.processName === row.processName) {
                        return { rowspan: 0, colspan: 0 };
                    } else {
                        let countRowspan = 1;
                        while (nextRow && nextRow.processName === row.processName) {
                            nextRow = visibleData[++countRowspan + _rowIndex];
                        }
                        if (countRowspan > 1) {
                            return { rowspan: countRowspan, colspan: 1 };
                        }
                    }
                } else if (row.empString && column.property === 'empString') {
                    const prevRow = visibleData[_rowIndex - 1];
                    let nextRow = visibleData[_rowIndex + 1];
                    if (prevRow && prevRow.empString === row.empString) {
                        return { rowspan: 0, colspan: 0 };
                    } else {
                        let countRowspan = 1;
                        while (nextRow && nextRow.empString === row.empString) {
                            nextRow = visibleData[++countRowspan + _rowIndex];
                        }
                        if (countRowspan > 1) {
                            return { rowspan: countRowspan, colspan: 1 };
                        }
                    }
                }
            },
            footerMethod({ columns, data }) {
                return [
                    columns.map((column, columnIndex) => {
                        if (columnIndex === 0) {
                            return '合计:';
                        }
                        if (['empNum'].includes(column.property)) {
                            return XEUtils.sum(data, column.property);
                        }
                        return null;
                    })
                ];
            }
        },
        watch: {
            reportData: {
                handler(newVal) {
                    this.ruleFrom = newVal ? JSON.parse(JSON.stringify(newVal)) : {};
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
<style scoped lang="scss">
.total-item {
    margin: 0 2px;
    width: 160px;
}
.shift-item {
    width: 100%;
    border: solid 1px #91d5ff;
    box-sizing: border-box;
    .card-title {
        height: 36px;
        border-bottom: solid 1px #91d5ff;
        background: #e6f7ff;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #2d8cf0;
        font-size: 14px;
    }
    .content {
        padding: 12px;
        box-sizing: border-box;
        font-size: 14px;
        color: #515a6e;
        overflow: auto;
    }
}
</style>
